<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">
          <div class="filtr-inline">
              <Button type="info" @click="onClickAdd">添加</Button>
          </div>
          <div class="filtr-inline">
            <span>仓库名称：</span><i-input v-model="form.name" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
            <span>负责人：</span><i-input v-model="form.user" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>
    <Drawer title="操作" width='420' v-model="show">
        
        <Form ref="formBase" :model="formBase" :rules="ruleValidate" :label-width="80">
            <FormItem label="名称" prop="name">
                <Input v-model="formBase.name" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="位置" prop="location">
              <Input v-model="formBase.location" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="负责人" prop="principal">
              <Input v-model="formBase.principal" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="电话" prop="mobile">
              <Input v-model="formBase.mobile" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="备注" prop="remark">
              <Input v-model="formBase.remark" style="width: 260px"></Input>
            </FormItem>
        </Form>

        <div class="drawer-footer">
            <Button type="primary" :loading="buttonLoad" @click="handleSubmit('formBase')">确定</Button>
        </div>
    </Drawer>

    <Modal
      v-model="showProduct"
      width="720"
      footer-hide
      >
      <p slot="header" style="color:#666;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>商品列表</span>
      </p>
      <div class="content">
        <Table :data="products" :loading="loadingProduct" :columns="productCol">

        </Table>
      </div>
    </Modal>

    <Modal
      v-model="showPrice"
      width="520"
      footer-hide
      >
      <p slot="header" style="color:#666;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>历史价格走势</span>
      </p>
      <div class="content" style="position:relative;">
        <Spin fix v-if="spinShow">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
        </Spin>
        <div ref="dom" :style="{width: '520px', height: '340px'}"></div>
      </div>
    </Modal>
  </div>
</template>
<script>
import echarts from 'echarts'
import { _getList, _saveData, _delData, _product } from '@/api/warehouse.js'
import { _price } from '@/api/product.js'
import tdTheme from '_c/charts/theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'warehouse',
  data () {
    return {
      spinShow: true,
      dom: null,
      productName: '',
      loadingProduct: true,
      showProduct: false, // 查看商品
      showPrice: false, // 查看价格
      buttonLoad: false,
      loading: true,
      total: 0,
      show: false,
      form: {
        name: '',
        user: '',
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        name: '',
        location: '',
        principal: '',
        mobile: '',
        remark: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '仓库名称不能为空'},
        ],
        location: [
          { required: true, message: '位置名称不能为空'},
        ],
        principal: [
          { required: true, message: '负责人名称不能为空'},
        ],
        mobile: [
          { required: true, message: '电话名称不能为空'},
        ],
      },
      products: [],
      productCol: [
        {
          title: '商品名',
          key: 'name',
          width: 100,
          fixed: 'left'
        },
        {
          title: '编号',
          key: 'code',
          width: 100
        },
        {
          title: '型号',
          key: 'specification',
          width: 100
        },
        {
          title: '分类',
          key: 'type',
          width: 100
        },
        {
          title: '单位',
          key: 'unit',
          width: 100
        },
        {
          title: '参考进价',
          key: 'purchase',
          width: 100
        },
        {
          title: '参考售价',
          key: 'price',
          width: 100
        },
        {
          title: '数量',
          key: 'num',
          width: 100,
          align: 'center',
          fixed: 'right'
        },
        {
          title: '历史采价',
          key: 'action',
          width: 100,
          fixed: 'right',
          render: (h, params) => {
            return h('Button', {
              props: {
                type: 'success',
                size: 'small'
              },
              on: {
                click: () => {
                  this.spinShow = true
                  this.showPrice = true
                  this.productName = params.row.name

                  _price({product_id: params.row.product_id}).then(res => {
                    this.spinShow = false
                    let obj = res.data
                    let xAxisData = []
                    obj.data.data.forEach(element => {
                      xAxisData.push(element.create_time.split(' ')[0])
                      element.value = element.price
                    });
                    this.$nextTick(() => {
                      let seriesData = obj.data.data

                      let option = {
                        title:{
                            text: this.productName
                        },
                        tooltip:{
                          trigger: 'axis',
                          formatter: function (params, ticket, callback) {
                              const item = params[0];
                              return `
                                      日期：${item.data.create_time} </br>
                                      数量：${item.data.num} </br>
                                      单价：${item.data.value} 元
                                    `;
                          }
                        },
                        legend: {
                            data:['价格']
                        },
                        xAxis: {
                            data: xAxisData,
                            axisLabel:{  
                              interval: 0 ,
                              rotate: -40
                            }
                        },
                        yAxis: {},
                        series: [
                          {
                            name: '价格',
                            type: 'line',
                            data: obj.data.data
                          }
                        ]
                      };

                      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
                      this.dom.setOption(option)
                    })
                  })


                }
              }
            }, '查看')
          }
        }
      ],
      columns: [
        {
            title: '仓库名称',
            key: 'name'
        },
        {
            title: '位置',
            key: 'location'
        },
        {
            title: '负责人',
            key: 'principal'
        },
        {
            title: '电话',
            key: 'mobile',
            width: 160
        },
        {
            title: '备注',
            key: 'remark',
            width: 160
        },
        {
            title: '仓库商品',
            key: 'action',
            width: 110,
            render: (h, params) => {
              return h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.loadingProduct = true
                    this.showProduct = true
                    _product({id: params.row.id}).then(res => {
                      this.loadingProduct = false
                      const obj = res.data
                      this.products = obj.data
                    })
                  }
                }
              }, '查看')
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                              this.$refs['formBase'].resetFields()

                              // 
                              this.formBase.id = params.row.id
                              this.formBase.name = params.row.name
                              this.formBase.location = params.row.location
                              this.formBase.principal = params.row.principal
                              this.formBase.mobile = params.row.mobile
                              this.formBase.remark = params.row.remark
                              this.show = true
                            }
                        }
                    }, '更新'),
                    h('Button', {
                         props: {type: 'error', size: 'small'},
                    }, [
                        h('Poptip', {
                            props: {
                                confirm: true,
                                transfer: true,
                                placement: 'left-end',
                                title: '确定要删除吗！',
                                type: 'error',
                                size: 'small',
                            },
                            on: {
                                'on-ok': () => {
                                  _delData({id: params.row.id}).then( res => {
                                      const obj = res.data
                                      if (obj.status == 1){
                                          this.$Message.success(obj.msg);
                                          this.getList()
                                      }else {
                                          this.$Message.error(obj.msg);
                                      }
                                  })
                                },
                            }
                        }, '删除')
                    ])
                ]);
            }
        },
      ],
      data: [],
      items: [] // 存放员工类型
    }
  },
  methods: {
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    // 增加按钮
    onClickAdd () {
      this.$refs['formBase'].resetFields()
      this.formBase.id = ''
      this.show = true
    },
    // 保存数据
    handleSubmit (form) {
      this.$refs[form].validate( (valid) => {
        if (valid) {
          const obj = {}
          Object.assign(obj, this.formBase)
          
          this.buttonLoad = true
          _saveData(obj).then( res => {
            const obj = res.data
            if (obj.status == 1){
              this.$Message.success(obj.msg)
            }else {
              this.$Message.error(obj.msg)
            }
            this.buttonLoad = false
            this.show = false
            this.getList()
          })
        }else {
          this.$Message.error('請填寫必填項')
        }
      })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getList(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
  },
}
</script>
<style scoped>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>